<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>数据报表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <div ref="dataChart" style="width:750px; height:400px;"></div>
    </el-card>
  </div>
</template>

<script>
// import echarts from 'echarts'

// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts'
// 引入柱状图
import 'echarts/lib/chart/bar'
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'

import _ from 'lodash'
export default {
  mounted() {
    this.paintChart()
  },
  methods: {
    async paintChart() {
      var myChart = echarts.init(this.$refs.dataChart)

      const { data: res } = await this.$http.get('reports/type/1')
      // console.log(res)

      var option = {
        // 标题
        title: {
          text: '用户来源'
        },
        // 提示框，鼠标悬浮交互时的信息提示
        tooltip: {
          trigger: 'axis', // 激活提示框
          axisPointer: {
            type: 'cross', // 提示框样式
            label: {
              backgroundColor: '#E9EEF3' // 提示框背景色
            }
          }
        },
        // 图表距离左边、右边、下边的相对距离
        grid: {
          left: '9%',
          right: '4%',
          bottom: '8%'
        },
        // x轴属性设置
        xAxis: [
          {
            // 坐标轴两边不要留白
            boundaryGap: false
          }
        ]
      }
      var options = _.merge(option, res.data)
      // console.log(options)
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(options)
    }
  }
}
</script>

<style lang="less" scoped>
.el-card {
  margin-top: 15px;
}
</style>
